<template>
  <v-card
    tabindex="0"
    elevation="0"
    class="bg-color-transparent"
    @click="toPath"
    @keypress.enter="toPath"
    role="button"
    :aria-label="title + ',' + subTitle"
    light
  >
    <v-card-title class="py-2 j-title" style="margin-left: -10px">{{ title }}</v-card-title>
    <v-sheet class="jian_bian1" :style="'background-image: linear-gradient(to right, ' + gradient.join(',') + ');'">
      <div class="en_title">{{ enTitle }}</div>
      <div class="sub_title">{{ subTitle }}</div>
      <div class="big_font web-font">{{ bigFont }}</div>
    </v-sheet>
  </v-card>
</template>

<script>
export default {
  name: "Jcard",
  props: {
    title: {
      required: true,
      type: String,
    },
    subTitle: {
      required: true,
      type: String,
    },
    enTitle: {
      required: true,
      type: String,
    },
    bigFont: {
      required: true,
      type: String,
    },
    gradient: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {};
  },
  methods: {
    toPath() {
      this.$emit("to");
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("//at.alicdn.com/t/webfont_oaeudtfqqqr.eot"); /* IE9*/
  src:
    url("//at.alicdn.com/t/webfont_oaeudtfqqqr.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("//at.alicdn.com/t/webfont_oaeudtfqqqr.woff2") format("woff2"),
    url("//at.alicdn.com/t/webfont_oaeudtfqqqr.woff") format("woff"),
    /* chrome、firefox */ url("//at.alicdn.com/t/webfont_oaeudtfqqqr.ttf") format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("//at.alicdn.com/t/webfont_oaeudtfqqqr.svg#思源黑体-极细") format("svg"); /* iOS 4.1- */
}

.web-font {
  font-family: "webfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.jian_bian1 {
  height: 160px;
  width: 100%;
  border-radius: 15px !important;
}
.big_font {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 100px;
  height: 140px;
  line-height: 120px;
  //font-weight: 100;
  color: #9aa1bd;
}
.en_title {
  position: absolute;
  bottom: 30px;
  left: 10px;
  padding: 0px 16px;
  border-radius: 8px;
  font-size: 23px;
  font-weight: bold;
  color: #5f6160;
}
.sub_title {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0px 16px;
  width: 95%;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 10px;
  height: 23px;
  line-height: 23px;
  box-sizing: border-box;
}
</style>
